// 头部导航栏
// 收起logo部分55px, logo部分69px, 头部导航部分51px
.splice-header {
    width: 100%;
    position: fixed;
    z-index: 100;

    .header-transparent {
        top: 0;
        transition: all 0.2s ease-out;
        background: linear-gradient(180deg, #23201e 0, rgba(35, 32, 30, 0));

    }

    ;

    .splice-container {
        width: 100%;
        height: 120px;
        position: fixed;
        top: 0;
        left: 0;

        .splice-navbar {
            height: 69px;
            padding: 0, 20px, 20px;

            // 头部上部
            .splice-navbar-top {
                height: 69px;

                //左侧
                // display: flex;
                .splice-navbar-left {
                    float: left;

                    ul {
                        // width: 40%;
                        display: flex;

                        li {
                            text-align: center;
                            height: 69px;
                            line-height: 69px;
                            color: #e5dfd9;
                            margin-left: 20px;
                        }
                    }
                }

                .splice-navbar-logo {
                    // float: left;
                    height: 69px;
                    padding: 26px 0 16px;
                    line-height: 69px;
                    margin: auto;
                    text-align: center;


                    img {
                        height: 26px;
                        width: 160px;
                        margin-left: -90px;
                    }

                }

                .splice-navbar-right {
                    float: right;
                    height: 69px;
                    line-height: 69px;
                    color: #e5dfd9;
                    position: relative;
                    margin-right: 20px;

                    .splice-nav-savedItems {
                        padding-left: 8px;
                        padding-right: 10px;
                    }

                    ;

                    .shopping-cart {
                        margin-right: 80px;

                        i {
                            margin-right: 3px
                        }
                    }

                    ;

                    .header-search {
                        width: 33px;
                        height: 33px;
                        line-height: 33px;
                        position: absolute;
                        display: inline-block;
                        background-color: #e5dfd9;
                        right: 10px;
                        top: 20px;
                        border-radius: 33px;
                    }
                }

            }

            //头部下面列表
            .splice-navbar-menu {
                height: 51px;
                // display: flex;
                // justify-items: auto;
                color: #e5dfd9;
                ;

                .splice-nav {
                    // width: 100%;
                    display: flex;
                    justify-content: center;

                    .splice-nav-menu {
                        line-height: 51px;

                        a {
                            padding: 0 15px;
                        }
                    }
                }
            }
        }
    }

    ;

    // 鼠标划过变色
    ._bgactive {
        background-color: #1b1b1b;
    }

    //侧边滚动栏滚动一定距离(55px)之后,头部栏慢慢收起
    ._compressed {
        top: -55px;
        transition: all 0.2s ease-out;
        background-color: #1b1b1b;
    }

}


// 主体部分

section {
    width: 100%;
    overflow: hidden;

    .banner {
        width: 100%;
        // height: 530px;
        position: relative;

        .box {
            width: 600%;
            display: flex;
            position: relative;
            left: 0px;


            div {
                width: 100%;

                img {
                    width: 100%;
                }
            }
        }

        ;

        .prev {
            height: 100px;
            font-size: 50px;
            line-height: 100px;
            position: absolute;
            left: 0;
            top: 40%;
            margin-left: 50px;
        }

        .next {
            height: 100px;
            font-size: 50px;
            line-height: 100px;
            position: absolute;
            right: 0;
            top: 40%;
            margin-right: 50px;
        }

        .dot {
            width: 100%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 0;

            li {
                background-color: #fff;
                width: 5px;
                height: 5px;
                margin: 10px;
                margin-bottom: 20px;
                border-radius: 50%;

                box-sizing: border-box;
                z-index: 100;
            }

            ;

            .show {
                // transform: translate3d(-50%,-50%,0) scale(.7);
                border: 1px solid #fff;
                margin: 8px;
                background: none;
                width: 10px;
                height: 10px;
            }

            ;


        }

        ;
    }

    // 下面的背包和衣服
    // 背包
    .product_package_clothes {
        position: relative;
        width: 97%;
        height: 800px;
        margin: auto;
        margin-top: 20px;
        background-color: #e7e7e7;

        .product_pack {
            position: absolute;
            top: -100px;
            left: 0;
            right: 0;
            margin: auto;

            a {
                img {
                    display: block;
                    margin: auto;
                    width: 695px;
                    height: 695px;
                }
            }
        }

        ;

        .product_pack_content {
            position: absolute;
            top: 500px;
            width: 100%;
            height: 150px;
            margin: auto;
            text-align: center;

            p {
                font-size: 12px;
                letter-spacing: 1.65px;
                font-weight: 400;
                line-height: 20px;
            }

            ;

            h2 {
                font-style: normal;
                color: #313131;
                font-size: 36px;
                letter-spacing: 2px;
                line-height: 44px;
                font-weight: light;
                width: 100%;
            }

            ;

            img {
                margin-top: 10px;
                width: 20px;
                height: 15px;
            }

            ;

            div {
                margin-top: 15px;

                a {
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    margin: auto;
                    background-color: #1b1b1b;
                    color: #e5dfd9;
                }
            }

        }
    }

    // 衣服
    .product_clothes {
        width: 97%;
        height: 1700px;
        margin: auto;
        background-color: #e7e7e7;
        text-align: center;

        .product_clo {
            margin: auto;

            a {
                img {
                    width: 100%;
                    display: block;
                    margin: auto;
                }
            }

            margin-bottom: 20px;
        }

        ;

        .product_clo_content {
            p {

                font-size: 12px;
                letter-spacing: 1.65px;
                font-weight: 400;
                line-height: 20px;
            }

            ;

            h2 {
                font-style: normal;
                color: #313131;
                font-size: 36px;
                letter-spacing: 2px;
                line-height: 44px;
                font-weight: light;
                width: 100%;
            }

            ;

            img {
                margin-top: 10px;
                width: 20px;
                height: 15px;
            }

            ;

            div {
                margin-top: 15px;

                a {
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    margin: auto;
                    background-color: #1b1b1b;
                    color: #e5dfd9;
                }
            }
        }

    }

    .blank {
        width: 100%;
        height: 1px;

    }

    // 鞋子
    .product_shoes {
        position: relative;
        width: 97%;
        height: 800px;
        margin: auto;
        background-color: #e7e7e7;
        overflow: hidden;

        .shoes_img {
            position: absolute;
            top: -100px;
            // overflow: hidden;
            left: 0;
            right: 0;
            margin: auto;

            a {
                img {
                    display: block;
                    margin: auto;
                    width: 695px;
                    height: 695px;
                }
            }
        }

        ;

        .shoes_content {
            position: absolute;
            top: 500px;
            width: 100%;
            height: 150px;
            margin: auto;
            text-align: center;

            p {
                font-size: 12px;
                letter-spacing: 1.65px;
                font-weight: 400;
                line-height: 20px;
            }

            ;

            h2 {
                font-style: normal;
                color: #313131;
                font-size: 36px;
                letter-spacing: 2px;
                line-height: 44px;
                font-weight: light;
                width: 100%;
            }

            ;

            img {
                margin-top: 10px;
                width: 20px;
                height: 15px;
            }

            ;

            div {
                margin-top: 15px;

                a {
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    margin: auto;
                    background-color: #1b1b1b;
                    color: #e5dfd9;
                }
            }

        }
    }

    //新系列
    .new_series {
        margin: auto;
        width: 97%;
        height: 614px;

        position: relative;
        background-image: url('https://res.gucci.cn/resources//2022/5/17/16527833241307182_content_HomepageVideoBackgroundStandard_1300x758_1652737266_HomepageVideoBackgroundStandard_cosmogonie-entry-02_001_Default.jpg');

        .page_new_series {
            width: 160px;
            height: auto;
            background-color: #f5f5f5;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -80px;
            margin-top: -146px;

            .homepage_video-content {
                .title {
                    font-size: 24px;
                    color: #4b4b4b;
                    line-height: 24px;
                    font-style: normal;
                    font-weight: 200;
                    padding: 37px 25px 23px;
                    margin: 0 auto;
                    text-align: center;

                    span {
                        display: block;
                        line-height: 1.3;
                    }
                }

                .text {

                    font-weight: 400;
                    color: #666;
                    font-size: 12px;
                    font-style: italic;
                    line-height: 20px;
                    margin: 0 auto;
                    padding: 0 25px 21px;
                    height: 60px;

                }
            };
            .homepage_video{
                padding: 0 0 40px;
                height: 30px;
                a{
                    font-size: 13px;
                    color: #333;
                    i{
                       font-size: 12px;
                        // display: inline-block;
                    }
                }
               
            }

        }
    }

    // 古驰故事
    .gucci_stories{
        width: 97%;
        margin: auto;
        background-color: #e7e7e7;

        .stories_header{
            padding: 63px 0 67px;
            position: relative;
            text-align: center;
            h2{
                font-style: normal;
                font-weight: 500;
                font-size: 36px;
                line-height: 36px;
                color: #313131;
                letter-spacing: 2px;
            }
            i{
                display: block;
                background: #999 0 0;
                bottom: -47px;
                height: 1px;
                left: 50%;
                position: relative;
                width: 12%;
                margin-left: -6%;
            }
        }

        .stories_content{
            overflow: hidden;
            width: 100%;
            height: auto;
            position: relative;
            .stories_img{
                width: 33.33%;
                height: auto;
                margin: 0 auto;
                float: left;
                .item_inner{
                    margin: 7.5%;
                    width: auto;
                    height: auto;
                    text-align: center;
                    a{
                        img{
                            width: 100%;
                        }
                    }
                    .title{
                        font-style: normal;
                        font-weight: light;
                        font-size: 20px;
                        margin-top: 47px;
                        min-height: 12px;
                        color: #000;
                        line-height: 20px;
                    }
                    .link{
                        font-style: normal;
                        display: inline-block;
                        font-size: 12px;
                        margin-bottom: 10px;
                        margin-top: 8px;
                        padding-right: 5px;
                        position: relative;
                        color: #1b1b1b;
                        i{
                            font-size: 12px;
                        }
                    
                    }
                }
            }
            .img1{
                position: absolute;
                bottom: 0;
                left: 0;
            }
            .img4{
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }

        .stories_footer{
            padding: 0 0 60px;
            position: relative;
            text-align: center;
            .view_all{
                width: 150px;
                height: 40px;
                line-height: 40px;
                padding-top: 9px;
                display: block;
                margin: auto;
                background-color: #1b1b1b;
                color: #e5dfd9;
            }
        }
    }

   
}
 // 底部上面的空格
 .foot_blank{
    width: 100%; 
    height: 15px;
    // background-color: red;
}

//尾部
.splice_footer{
    width: 100%;
    background: #1b1b1b;
    position: relative;
    z-index: 0;
    padding: 48px 0px 15px;
    .splice_container{
        .splice_back_top{
            cursor: pointer;
            width: 36px;
            height: 36px;
            position: absolute;
            top: -36px;
            right: 24px;
            background: #fff!important;
            // border: 1px solid #f5f5f5;
            font-size: 0;
            i{
                width: 36px;
                height: 36px;
                display: block;
                text-align: center;
                line-height: 36px;
                color: #999;
            }

        }
        // 中间内容
        .splice_footer_content{
            .splice_footer_left{
                display: inline-block;
                vertical-align: top;
                width: 66.66667%;
                padding-top: 11px;
                ul{
                    padding-left: 23px;
                    li{
                        display: inline-block;
                        vertical-align: top;
                        width: 24%;
                        .spice_all{
                            padding-left: 0;
                            li{
                                width: 100%;
                                display: block;
                                
                                margin-bottom: 14px;
                                span{
                                    color: #e5dfd9;
                                }

                            }
                        }
                        ul{
                            padding-left: 0;
                            li{
                                margin-bottom: 14px;
                                display: block;
                                width: 100%;
                                span{
                                    color: #e5dfd9;
                                }
                            }

                        }
                    }
                   
                    .spice_exclusive_service{
                        .spice_footer_title{
                            margin-bottom: 28px;
                            span{    
                                color: #e5dfd9;
                                opacity: .5;
                            }
                        }
                    }

                    .spice_shoping_help{
                        .spice_footer_title{
                            margin-bottom: 28px;
                            span{
                                color: #e5dfd9;
                                opacity: .5;
                            }
                        }
                    }

                    .spice_about_company{
                        .spice_footer_title{
                            margin-bottom: 28px;
                            span{
                                color: #e5dfd9;
                                opacity: .5;
                            }
                        }
                    }
                    .spice_follow_gucci{
                        .spice_footer_title{
                            margin-bottom: 28px;
                            span{
                                color: #e5dfd9;
                                opacity: .5;
                            }
                        }
                    }
                    .spice_need_help{
                        padding-left: 0;
                        position: relative;
                        top: -75px;
                        .spice_footer_title{
                            margin-bottom: 28px;
                            span{
                                color: #e5dfd9;
                                opacity: .5;
                            }
                        }
                    }
                    .slice_footer_tails{
                        position: relative;
                        top: 27px;
                    }
                }
            }

            .splice_footer_right{
                display: inline-block;
                vertical-align: top;
                width: 32%;
                // padding-top: 11px;
                .splice_footer_right_content{
                    padding-left: 15%;
                    .spice_form_group{
                        margin: 12px 0 20px;
                        .spice_form_title{
                            font-size: 12px;
                            color: #e5dfd9;
                            opacity: .5;
                            letter-spacing: 0;
                        }
                        .spice_form_content{
                            .spice_form_info{
                                
                                color: #e5dfd9;
                                letter-spacing: 0;
                                margin-top: 12px;
                            }
                            .spice_form_input{
                                width: 222px;
                                margin-top: 23px;
                                input{
                                    float: left;
                                    width: 180px;
                                    height: 28px;
                                    background: #000;
                                    border: 1px solid transparent!important;
                                    outline: none;
                                    color: #e5dfd9;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}